import React, { useState, useEffect } from 'react'
import cityData from "../cityData";
import {
    Form,
    Input,
    Button,
    Table,
    Space,
    Select,
    Tabs,
    Popconfirm,
    message,
    Drawer,
} from 'antd';
// 采用hook  redux
import { useMappedState, useDispatch } from "redux-react-hook"
import request from "../../utils/request";
import Checks from "../../store/actions/Check"

import "./Check.css"

const Check = () => {
    const { TextArea } = Input;
    const { TabPane } = Tabs;
    const dispatch = useDispatch();
    const [Tab, setTab] = useState("");
    const [city, setCity] = useState([]);
    const [county, setCounty] = useState([]);
    const [checkist, setcheck] = useState([]);
    // 获取仓库里的表单元素
    const { from } = useMappedState((state) => {
        return state.Check
    })
    // 获取所有的审核数据
    useEffect(() => {
        getter(Tab);
    }, []);
    // 获取
    const getter = async (key) => {
        const res = await request({
            url: "/api/GetCheck",
            method: "get",
            params: {
                state: key,
            }
        })
        if (res.code === 200) {
            setcheck(res.data)
        }
    }
    // 点击查询
    const onFinish = async (values) => {
        // 判断是否为空
        if (!values.city) values.city = "";
        if (!values.county) values.county = "";
        if (!values.province) values.province = "";
        if (!values.word) values.word = "";
        let res = await request({
            url: '/api/searchCheck',
            method: "get",
            params: {
                ...values, state: Tab,
            }
        })
        if (res.code === 200) {
            setcheck(res.data)
        }
    }
    // 切换类型   审核通过  审核未通过  全部
    const Tablist = (key) => {
        setTab(key)
        getter(key);
    }
    //城市
    const City = (changedValues) => {
        // 判断你点击的是城市还是省份
        if (changedValues.province) {
            setCity([]);
            setCounty([]);
            const cityList = cityData.filter(item => {
                if (item.name === changedValues.province) {
                    return { ...item }
                }
            })
            const newcity = { ...cityList };
            setCity([...newcity[0].cityList]);
        } else if (changedValues.city) {
            setCounty([]);
            const countyList = city.filter(item => {
                if (item.name === changedValues.city) {
                    return { ...item }
                }
            })
            const newcounty = { ...countyList };
            setCounty([...newcounty[0].areaList])
        }
    }
    //表格
    const { Column } = Table;
    const { Option } = Select;
    //状态
    const State = async (text) => {
        let res = await request({
            url: "/api/stateCheck",
            method: "put",
            data: {
                id: text.id
            }
        })
        message.success(res.message);
        getter(Tab);
    }

    //删除
    const Delete = async (text) => {
        const res = await request({
            url: "/api/DeleteCheck",
            method: "delete",
            params: { id: text.id },
        })
        message.success(res.message);
        getter(Tab);
    }

    const [visible, setVisible] = useState(false);
    const showDrawer = (text) => {
        dispatch(Checks.editorCheck(text))
        setVisible(true);
    };
    const Change = (type, text) => {
        dispatch(Checks.editorCheck({
            type, text
        }))
    }
    const onClose = () => {
        setVisible(false);
    };
    const AddEditor = async () => {
        let res = await request({
            url: "/api/editorCheck",
            method: "put",
            data: {
                arr: from
            }
        })
        message.success(res.message);
        getter(Tab);
        onClose();
    }
    return (
        <div className="Check">
            <div className="CheckHeader">
                审核管理
            </div>
            <div className="CheckMain">
                <div className="CheckTop">
                    {
                        <Tabs type="card" size="Default" onChange={Tablist}>
                            <TabPane tab="全部" key="">
                            </TabPane>
                            <TabPane tab="审核通过" key="1">
                            </TabPane>
                            <TabPane tab="审核未通过" key="0">
                            </TabPane>
                        </Tabs>
                    }
                    <Form name="complex-form" onFinish={onFinish} onValuesChange={City} >
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="province"
                                    noStyle
                                >
                                    <Select placeholder="请选择省份" style={{ width: '100%' }}>
                                        {
                                            cityData.length && cityData.map((item, index) => {
                                                return <Option value={item.name} key={index}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="city"
                                    noStyle
                                >
                                    <Select placeholder="请选择城市" style={{ width: '100%' }}>
                                        {
                                            city.length && city.map((item, index) => {
                                                return <Option value={item.name} key={index}>{item.name}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item>
                            <Input.Group compact>
                                <Form.Item
                                    name="county"
                                    noStyle
                                >
                                    <Select placeholder="请选择区县" style={{ width: '100%' }}>
                                        {
                                            county.length && county.map((item, index) => {
                                                return <Option value={item} key={index}>{item}</Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item
                            name="word"
                        >
                            <Input placeholder="请输入关键字" />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div className="Checkmain">
                    <Table dataSource={checkist} bordered>
                        <Column title="序号" dataIndex="key" key="key" align="center" />
                        <Column title="小区名称" dataIndex="name" key="name" align="center" />
                        <Column title="标题" dataIndex="title" key="title" align="center" />
                        <Column title="面积/㎡" dataIndex="area" key="area" align="center" />
                        <Column title="总价/万" dataIndex="price" key="price" align="center" />
                        <Column title="排序" dataIndex="id" key="id" align="center" />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space size="middle">
                                    {
                                        text.state ? "审核通过" : "待审核"
                                    }
                                </Space>
                            )}
                            align="center" />
                        <Column
                            title="操作"
                            key="action"
                            render={(text, record) => (
                                <Space size="middle">
                                    <a onClick={() => State(record)}>审核</a>
                                    <a onClick={() => showDrawer(record)}>编辑</a>
                                    <Popconfirm
                                        title="是否要删除？请再次确定"
                                        onConfirm={() => Delete(record)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <a>删除</a>
                                    </Popconfirm>
                                </Space>
                            )}
                            align="center" />
                    </Table>
                </div>
                <div className="checkModel">
                    <Drawer
                        title="编辑"
                        width={500}
                        onClose={onClose}
                        visible={visible}
                        extra={
                            <Space>
                                <Button onClick={onClose}>取消</Button>
                                <Button type="primary" onClick={AddEditor}>
                                    提交
                                </Button>
                            </Space>
                        }
                    >
                        <Input size="large" placeholder="请输入小区名称" value={from.name} onChange={(e) => Change("name", e.target.value)} />
                        <br />
                        <br />
                        <Input size="large" placeholder="请输入标题" value={from.title} onChange={(e) => Change("title", e.target.value)} />
                        <br />
                        <br />
                        <Input size="large" placeholder="请输入面积" value={from.area} onChange={(e) => Change("area", e.target.value)} />
                        <br />
                        <br />
                        <Input size="large" placeholder="请输入价格" value={from.price} onChange={(e) => Change("price", e.target.value)} />
                        <br />
                        <br />
                        <Select placeholder="请选择省份" value={from.province} style={{ width: '100%' }} onChange={(e) => { City({ province: e }); Change("province", e) }}>
                            {
                                cityData.length && cityData.map((item, index) => {
                                    return <Option value={item.name} key={index}>{item.name}</Option>
                                })
                            }
                        </Select>
                        <Select placeholder="请选择城市" value={from.city} style={{ width: '100%' }} onChange={(e) => { City({ city: e }); Change("city", e) }}>
                            {
                                city.length && city.map((item, index) => {
                                    return <Option value={item.name} key={index}>{item.name}</Option>
                                })
                            }
                        </Select>
                        <Select placeholder="请选择区县" value={from.county} style={{ width: '100%' }} onChange={(e) => { City({ county: e }); Change("county", e) }}>
                            {
                                county.length && county.map((item, index) => {
                                    return <Option value={item} key={index}>{item}</Option>
                                })
                            }
                        </Select>
                        <Input placeholder="请输入关键字" value={from.word} onChange={(e) => Change("word", e.target.value)} />
                        <br />
                        <br />
                        <TextArea rows={4} placeholder="请输入内容" value={from.content} onChange={(e) => Change("content", e.target.value)} />
                    </Drawer>
                </div>
            </div>
        </div>
    )
}

export default Check
